<template>
	<view class="container">
		<view class='nav'>
			<view :class='current==0?"font-color":""' class="nav_unit" id='0' v-on:click='operation'>全部</view>
			<view :class='current==1?"font-color":""' class="nav_unit" id='1' v-on:click='operation'>待使用</view>
			<view :class='current==2?"font-color":""' class="nav_unit" id='2' v-on:click='operation'>已使用</view>
		</view>
		<view class="content" v-show="current==0">
			<block v-if="result[0].length==0">
				<view class="none">没有订单信息</view>
			</block>
			<block v-else>
				<view class="merchant" v-for="(value,index) in result[0]" :key="index">
					<view class="coupon_unit">
						<image mode="aspectFill" :style="{height:merchant_pic}" :src="url+value.coupon_imgurl"></image>
						<view class="coupon_con" :style="{height:merchant_pic}">
							<view class="coupon_title">{{value.coupon_name}}</view>
<!--							<view class="coupon_number">{{value.name}}</view>-->
							<view class="coupon_number">{{value.name}}</view>
							<view class="coupon_tag">
								<text class="tag">门店</text>
<!--								<text class="tag">{{// value.shop_sort_name}}</text>-->
								<text class="status">
									{{value.write_off_status}}
								</text>
							</view>
						</view>
					</view>
					<view class="qrcode">
						<!-- <view class="qrcode_name">兑换码</view> -->
						<view class="qrcode_button" :id="value.get_coupon_id" v-on:click="qrcode" v-if="value.write_off_status=='未使用'">兑换二维码</view>
					</view>
				</view>
			</block>
		</view>
		<view class="content" v-show="current==1">
			<block v-if="result[1].length==0">
				<view class="none">没有卡券信息</view>
			</block>
			<block v-else>
				<view class="merchant" v-for="(value,index) in result[1]" :key="index">
					<view class="coupon_unit">
						<image mode="aspectFill" :style="{height:merchant_pic}" :src="url+value.coupon_imgurl"></image>
            <view class="coupon_con" :style="{height:merchant_pic}">
              <view class="coupon_title">{{value.coupon_name}}</view>
              <!--							<view class="coupon_number">{{value.name}}</view>-->
              <view class="coupon_number">{{value.name}}</view>
              <view class="coupon_tag">
                <text class="tag">门店</text>
                <!--								<text class="tag">{{// value.shop_sort_name}}</text>-->
                <text class="status">
                  {{value.write_off_status}}
                </text>
              </view>
            </view>
					</view>
					<view class="qrcode">
						<!-- <view class="qrcode_name">兑换码</view> -->
						<view class="qrcode_button" id="value.get_coupon_id" v-on:click="qrcode">兑换二维码</view>
					</view>
				</view>
			</block>
		</view>
		<view class="content" v-show="current==2">
			<block v-if="result[2].length==0">
				<view class="none">没有卡券信息</view>
			</block>
			<block v-else>
				<view class="merchant" v-for="(value,index) in result[2]" :key="index">
					<view class="coupon_unit">
						<image mode="aspectFill" :style="{height:merchant_pic}" :src="url+value.coupon_imgurl"></image>
            <view class="coupon_con" :style="{height:merchant_pic}">
              <view class="coupon_title">{{value.coupon_name}}</view>
              <!--							<view class="coupon_number">{{value.name}}</view>-->
              <view class="coupon_number">{{value.name}}</view>
              <view class="coupon_tag">
                <text class="tag">门店</text>
                <!--								<text class="tag">{{// value.shop_sort_name}}</text>-->
                <text class="status">
                  {{value.write_off_status}}
                </text>
              </view>
            </view>
					</view>
					<view class="qrcode">
						<view class="qrcode_name" v-if="value.write_off_status=='未使用'">兑换码</view>
						<view class="qrcode_button" id="value.get_coupon_id" v-on:click="qrcode" v-if="value.write_off_status=='未使用'">兑换二维码</view>
					</view>
				</view>
			</block>
		</view>
		<view class="mask" v-show="display==1" :style="{width:width,height:h}" v-on:click="close_dialog"></view>
		<view class="dialog" :style="{left:left}" v-show="display==1">
			<view class="ticket_qrcode">
				  <canvas class="canvas_" :style="{width:w,height:w}" canvas-id="mycanvas"/>
			</view>
			<view class="dialog_coupon_name">{{coupon_name}}</view>
			<view class="dialog_time">有效期{{datetime}}</view>
			<view class="dialog_remake">(请将二维码出示给店家)</view>
		</view>
	</view>
</template>
<style>
	page{background: #F1F1F1;}
	.container{width:100%;}
	.nav{width:100%;height: 80upx;background-color:#FFFFFF; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.nav_unit{width: 33%;height: 80upx;line-height: 80upx;  font-size: 28upx;text-align: center;}
	.font-color{color: #3de9c7;border-bottom:2px solid #3de9c7;}
	.content{width: 100%;}
	.none{width:100%;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;}
	/******************/
	.merchant{width:94%;padding:10upx 3%;background: #FFFFFF;margin:20upx 0;}
	.coupon_tag{width:98%;padding-left:2%;display: flex;justify-content: space-between;align-items: center;height: 60upx;}
	.tag{border:1px solid #E03636;color: #E03636;padding:5upx 20upx;border-radius: 10upx;font-size: 24upx;}
	.status{font-size: 28upx;}
	.qrcode{width:100%;padding:0;display: flex;justify-content: flex-end;align-items: center;height: 60upx;padding-top: 10upx;border-top: 1px solid #F1F1F1;}
	.qrcode_button{height: 60upx;line-height: 60upx;color: #FFFFFF;text-align: center;font-size: 28upx;padding:0 30upx;
	background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 30upx;}
	.qrcode_name{font-size: 28upx;font-weight: bold;}
	.coupon_unit{width:100%;padding:10upx 0;display: flex;justify-content: space-between;align-items: center;}
	.coupon_unit image{width:20%;}
	.coupon_con{width:78%;padding-left:2%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
	.coupon_title{font-size: 32upx;color: #333333;}
	.coupon_number{font-size: 28upx;color: #999999;}
	.coupon_number text{padding-left: 10upx;}
	.coupon_integral{font-size: 28upx;color: #999999;}
	.coupon_integral text{color: #E03636;padding-left: 10upx;font-size: 32upx;}
	.coupon_operate{width:18%;height: 60upx;line-height: 60upx;color: #FFFFFF;text-align: center;font-size: 28upx;
	background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 30upx;}
	.ticket_qrcode{width:100%;display: flex;justify-content: center;align-items: center;height: 300upx;background: #FFFFFF;}
	/************************************/
	.mask{z-index: 999;background: #000;opacity: 0.6;position: fixed;top:0;}
	.dialog{background: #FFFFFF;z-index: 9999;width:60%;height: 500upx;position: fixed;top:100px;border-radius: 20upx;overflow: hidden;}
	.dialog_coupon_name,.dialog_time{width:100%;text-align: center;font-size:24upx;line-height: 50upx;}
	.dialog_remake{width:100%;text-align: center;font-size:24upx;line-height: 50upx;color: #666;}
	/************************************/
</style>
<script>
	import QR from  "../../static/js/qrcode.js";
	export default {
		data() {
			return {
				w:'',
				h:'',
				width:'',
				current: 0,
				result:[[],[],[]],
				start:[0,0,0],
				submit_status:1,
				refresh_status:0,
				merchant_pic:'',
				status:0,
				display:0,
				datetime:'',
				coupon_name:'',
				left:'',
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.pic_h = w*0.92*0.2+"px";
			if(e.status!=undefined)
			{
				this.current = parseInt(e.status);
			}
			this.merchant_pic = w*0.94*0.2+"px";
			
			this.w   = res.windowWidth*94/100/2.5 +'px';
			this.h = res.windowHeight+"px";
			this.width  = res.windowWidth+"px";
			this.left   = w*0.4/2+"px";
			this.initialize(this.current);
		},
		onPullDownRefresh() {
			this.refresh_status = 1;
			this.initialize(this.current);
		},
		onReachBottom:function()
		{
			this.initialize(this.current);
		},
		methods: {
			close_dialog:function()
			{
				this.display = 0;
			},
			qrcode:function(e)
			{
				this.display = 1;
				var size = this.setCanvasSize();
				var member_id = uni.getStorageSync("member_id");
				var id = e.currentTarget.id;
				this.createQrCode(id+"||"+member_id,"mycanvas",size.w, size.h);
				for(var i=0;i<this.result.length;i++)
				{
					for(var j=0;j<this.result[i].length;j++)
					{
						if(parseInt(id)==this.result[i][j].get_coupon_id)
						{
							this.coupon_name = this.result[i][j].coupon_name;
							this.datetime    = this.result[i][j].end_time;
						}
					}
				}
			},
			initialize:function(status)
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				// var member_id = 169015;
				var st = parseInt(status)+1;
				uni.request({
					url: this.url+'/wechat_integral_order', 
					data: {member_id:member_id,status:st,start:this.start[status]},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							that.start[status] += 10;
							for(var k=0;k<res.data.result.length;k++)
							{
								that.result[status].push(res.data.result[k]);
							}
						}
						if(that.refresh_status==1)
						{
							that.refresh_status = 0;
							uni.stopPullDownRefresh();
						}
					}
				});
			},
			operation:function(e)
			{
				var id = e.currentTarget.id;
				this.current = parseInt(id);
				this.id = parseInt(id);
				this.initialize(this.id);
			},
			setCanvasSize:function()
			{
				var size={};
				try {
					var res = uni.getSystemInfoSync();
					var scale = 750/686;//不同屏幕下canvas的适配比例；设计稿是750宽
					var width = res.windowWidth/scale*94/100/2.5;
					var height = width;//canvas画布为正方形
					size.w = width;
					size.h = height;
				  } catch (e) {
					// Do something when catch error
					console.log("获取设备信息失败"+e);
				  } 
				return size;
			} ,
			createQrCode:function(url,canvasId,cavW,cavH){
				//调用插件中的draw方法，绘制二维码图片
				QR.api.draw(url,canvasId,cavW,cavH);
				setTimeout(() => { this.canvasToTempImage();},1000);
			},
			canvasToTempImage:function(){
				var that = this;
				uni.canvasToTempFilePath({
				  canvasId: 'mycanvas',
				  success: function (res) {
					  var tempFilePath = res.tempFilePath;
					  console.log(tempFilePath);
					  that.imagePath=tempFilePath;
				  },
				  fail: function (res) {
					  console.log(res);
				  }
				});
			}
		}
	}
</script>


